<template>
  <div class="status">
    <table>
      <tr
        v-for="(item, index) of statusData"
        :key="index"
        :style="{ background: item.bg }"
      >
        <td>
          <span v-if="status === item.text">》</span>
        </td>
        <td>{{item.text}}</td>
        <td>{{item.val }}</td>
      </tr>
    </table>
  </div>
</template>

<script>
export default {
  name: "BMIStatusComponent",
  props: {
    status: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      statusData: [
        {
          text: '分类',
          val: 'BMI 范围',
          bg: 'aqua'
        },
        {
          text: '偏瘦',
          val: '<= 18.4',
          bg: 'gray'
        },
        {
          text: '正常',
          val: '18.5 ~ 23.9',
          bg: 'green'
        },
        {
          text: '过重',
          val: '24.0 ~ 27.9',
          bg: 'yellow'
        },
        {
          text: '肥胖',
          val: '>= 28.0',
          bg: 'orange'
        }
      ]
    }
  }
}
</script>

<style scoped>
.status {
  /*background: gray;*/
}
</style>
